<template>
    <c-list-template title="账单管理" :operation="true">
        <template slot="search">
            <el-row :gutter="24">
                <el-col :span="6" class="flex-center mt-lg">
                    <div class="mr-lg">费用类型</div>
                    <el-select v-model="querys.typeList" placeholder="请选择费用类型">
                        <el-option v-for="item in billStatus" :key="item.value" :label="item.label" :value="item.value" v-if="item.value != 0"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6" class="flex-center mt-lg">
                    <div class="mr-lg">供应商名称</div>
                    <el-input v-model="querys.sellerName" placeholder="请输入卖家企业名称" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="6" class="flex-center mt-lg">
                    <div class="mr-lg">支付方式</div>
                    <el-select v-model="payModeList" collapse-tags multiple @change="payModeChange" placeholder="请选择支付方式">
                        <el-option v-for="item in payMode" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6" class="flex-center mt-lg">
                    <div class="mr-lg">流水号</div>
                    <el-input v-model="querys.innerId" placeholder="请输入交易流水号" class="wh flex-1 mr-lg" />
                </el-col>
                <el-col :span="6" class="flex-center mt-lg">
                    <div class="mr-lg">状态</div>
                    <el-select v-model="querys.type" placeholder="请选择状态">
                    </el-select>
                </el-col>
                <el-col :span="8" class="flex-center mt-lg">
                    <div class="mr-lg">支付时间</div>
                    <el-date-picker v-model="querys.timeExpiry" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-col>
                <el-col :span="10" class="flex-x-end mt-lg">
                    <el-button icon="el-icon-search" type="primary" @click="handleSelect">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </template>
        <template slot="list">
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="tableData" v-loading="loading">
                <el-table-column label="序号" align="center" width="80" type="index" />
                <el-table-column label="流水号" width="200" align="center" prop="innerId" />
                <el-table-column label="费用类型" width="150" align="center" prop="type">
                    <template slot-scope="scope">
                        {{scope.row.type == null ? "":billStatus[scope.row.type].label}}
                    </template>
                </el-table-column>
                <el-table-column label="费用说明" width="300" align="center">
                    <template slot-scope="scope">
                        {{scope.row.details == null ? "-":scope.row.details}}
                    </template>
                </el-table-column>
                <el-table-column label="金额（元）" width="150" align="center" prop="amount" />
                <el-table-column label="支付方式" width="200" align="center" prop="">
                    <template slot-scope="scope">
                        {{scope.row.payMode == null ? "":payMode[scope.row.payMode].label}}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" width="200">
                    <template slot-scope="scope">
                        {{ scope.row.timeCreate | dateYMDHMSFormat }}
                    </template>
                </el-table-column>
                <el-table-column label="支付时间" align="center" width="200">
                    <template slot-scope="scope">
                        {{ scope.row.timePay | dateYMDHMSFormat }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="150" align="center" prop="">
                    <template slot-scope="scope">
                        {{scope.row.status == null ? "":marginStatus[scope.row.status].label}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="handleDepositDetails(scope.row)">查看明细</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template slot="pagination">
            <el-pagination background :current-page="querys.current" :page-sizes="[10, 20, 50, 100]" :page-size="querys.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </template>
        <c-deposit-details ref="cDepositDetails" />
    </c-list-template>
</template>
<script>
import cDepositDetails from "../components/c-deposit-details.vue";
import { billStatus, payMode, marginStatus } from "@/utils/status.js";
export default {
    components: {
        cDepositDetails
    },
    data () {
        return {
            total: 0,
            tableData: [],
            querys: {
                current: 1,
                size: 10,
                payModeList: ""
            },
            loading: false,
            payMode: payMode,
            billStatus: billStatus,
            marginStatus: marginStatus,
            payModeList: []
        };
    },
    mounted () {
        this.tableList();
    },
    methods: {
        handleDepositDetails (item) {
            this.$refs.cDepositDetails.handleOpen(item);
        },
        payModeChange () {
            this.querys.payModeList = ""
            for (let len = 0; len < this.payModeList.length; len++) {
                this.querys.payModeList == "" ? this.querys.payModeList = this.payModeList[len] : this.querys.payModeList = this.querys.payModeList + "," + this.payModeList[len]
            }
            console.log(this.querys.payModeList);
        },
        handleChargeMoney (item) {
            this.$refs.cChargeMoney.handleOpen(item);
        },
        handleAdd () {
            this.$refs.cDealerForm.handleOpen();
        },
        handleEdit (item) {
            item.view = false
            this.$refs.cDealerForm.handleOpen(item);
        },
        handleDetails (item) {
            item.view = true
            this.$refs.cDealerForm.handleOpen(item);
        },
        tableList () {
            this.loading = true;
            const params = JSON.parse(JSON.stringify(this.querys));
            const url = "/sellerBill/page";
            this.$get({ url, params }).then((res) => {
                this.tableData = res.records;
                this.total = res.total * 1;
                this.loading = false;
            });
        },
        handleReset () {
            this.querys = {
                current: 1,
                size: 10,
            };
            this.tableList();
        },
        handleSelect () {
            this.querys.current = 1;
            this.tableList();
        },
        handleSizeChange (val) {
            this.querys.size = val;
            this.tableList();
        },
        handleCurrentChange (val) {
            this.querys.current = val;
            this.tableList();
        },
    },
};
</script>
